<template>
    <div class="alease_title_left">
        <Icon :icon="icon" fontSize="24" class="title_icon" />
        <div class="title-text">
            <slot>设备状态</slot>
            <div class="title-text-bottom">
                <slot name="slot-bottom">Equipment state</slot>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
const props = defineProps({
    left: {
        type: Number,
        default: 20
    },
    icon: {
        type: String,
        default: 'tiankonghe'
    }
})
</script>
<style lang="scss" scoped>
.alease_title_left {
    position: relative;
    font-family: Oppo;
    font-weight: 500;
    color: #ffffff;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    // line-height: 28px;
    // @include Width(400);
    // width: 100%;
    @include Width(350);
    // width: 100%;
    @include hHeight(40);
    @include FontSize(20);
    @include MarginBottom(5);
    //@include Padding(0, 0, 10, 0);
    overflow: hidden;
    background: url('./tiltle_s@2x.png') no-repeat;
    background-size: 100% 100%;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    //background: url("~@/assets/images/基础/左侧面板-黑透@2x.png") no-repeat;
    // background-size: 100% 100%;
    .title_icon {
        display: flex;
        justify-content: center;
        align-items: center;
        //@include boxMarginLeft(v-bind("(props.left )"));
        @include Width(32);
        @include wHeight(32);
    }

    //&::after {
    //  content: "";
    //  position: absolute;
    //  @include Bottom(5);
    //  @include CalcLeft(v-bind("props.left"));
    //
    //  width: 100%;
    //  @include hHeight(1);
    //  background: url("./tit_bg@2x.png") no-repeat center/cover;
    //  background-size: 100%;
    //}

    .title-text {
        flex: 1;
        @include MarginLeft(9);
        position: relative;
        @include Top(1);
        width: fit-content;

        .title-text-bottom {
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
            color: #ffffff80;
            @include FontSize(10);
        }
    }
}
</style>
